<template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <Header></Header>
      </el-header>
        <el-container>
          <el-aside width="200px">
            <Aside></Aside>
          </el-aside>
          <el-main>
            <el-card class="box-card">
            <router-view></router-view>
          </el-card>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
<script setup>
import Aside from '../components/Aside.vue';    
import Header from '../components/Header.vue';

</script>
  
  <style lang="scss" scoped>
  .el-container {
    height: 100%;
    .el-header {
      background: -webkit-gradient(linear, left top, right top, from(#1493fa), to(#01c6fa));
      text-align: center;
      line-height: 60px;
      color: #333;
    }
    .el-aside {
      width: 200px;
      height: 100%;
      color: #333;
      background: white
    }
    .el-main {
      height: 100vh;
      background-color: #e9eef3;
      color: #333;
    }
  }
  </style>
  
  